<!DOCTYPE html>
<head>
	<% content_for :title, t(:titleeditprofile) %>
</head>
<body id="login-page">
	<div class="feat_prod_box_details">
		<div id="loginForm" onsubmit="return checkEditUserProfile()">
			<div class="contact_form1">
				<div class="form_subtitle">
					<%= t :editprofile %>
				</div>
				<%= render 'form' %>
				<%if(session[:language] == "vi")%>
					<strong class="changepass"><a href="<%= edit_user_registration_path %>?lang=vi" class = "changepass"><%= t :changepass %></a></strong>
					<br />
					<strong class="changepass"><%= link_to t("back"), user_profile_path(@user_profile)+"?lang=vi" %></strong>
				<%else%>
				<strong class="changepass"><a href="<%= edit_user_registration_path %>" class = "changepass"><%= t :changepass %></a></strong>
					<br />
					<strong class="changepass"><%= link_to t("back"), @user_profile %></strong>
				<%end%>
			</div>
		</div>
	</div>

	<script>
		function checkEditUserProfile() {
			var fname = document.getElementById("user_profile_firstname");
			var lname = document.getElementById("user_profile_lastname");
			var mssv = document.getElementById("user_profile_mssv");
			var email = document.getElementById("user_profile_email");
			var pass = document.getElementById("user_profile_password");
			fname.style.backgroundColor = "#ffffff";
			lname.style.backgroundColor = "#ffffff";
			mssv.style.backgroundColor = "#ffffff";
			email.style.backgroundColor = "#ffffff";
			pass.style.backgroundColor = "#ffffff";
			var v1=true;
			var v2=true;
			var v3=true;
			var v4=true;
			var v5=true;
			document.getElementById('spanFN').innerHTML="";
			document.getElementById('spanLN').innerHTML="";
			document.getElementById('spanMSSV').innerHTML="";
			document.getElementById('spanEmail').innerHTML="";
			document.getElementById('spanPass2').innerHTML="";
			if (fname.value == "") {
				fname.style.backgroundColor = "#ff6666";
				document.getElementById('spanFN').innerHTML="Firstname must be filled out";
				v1= false;
			}

			if (lname.value == "") {
				lname.style.backgroundColor = "#ff6666";
				document.getElementById('spanLN').innerHTML="Lastname must be filled out";
				v2 =false;
			}

			if (mssv.value == "") {
				mssv.style.backgroundColor = "#ff6666";
				document.getElementById('spanMSSV').innerHTML="MSSV must be filled out";
				v3 =false;
			} else if (mssv.value.length != 8) {
				mssv.style.backgroundColor = "#ff6666";
				document.getElementById('spanMSSV').innerHTML="MSSV lenght is 8";
				v3 =false;
			}
			
			var regemail=new RegExp("[A-z0-9]+\@[A-z0-9]+\.[a-z]+");
			if(email.value==""){
				email.style.backgroundColor = "#ff6666";
				document.getElementById("spanEmail").innerHTML="Please enter an email";
				v4 = false;
			} else{
				if(!regemail.test(email.value)){
					email.style.backgroundColor = "#ff6666";
					document.getElementById("spanEmail").innerHTML="Please enter a valid email";
					v4 = false;
				}
			}
			if (pass.value == "") {
				pass.style.backgroundColor = "#ff6666";
				document.getElementById('spanPass2').innerHTML="Password must be filled out";
				v2 =false;
			}
			if(!v1 || !v2 || !v3 || !v4) return false;
		}
	</script>
</body>
</html>

